<template>
	<div class="pointAttribute" v-if="attributeData">
		<!-- 名称 -->
		<div class="pointAttribute-item">
			<span class="label">点位名称</span>
			<el-input
				v-model="attributeData.DisplayName"
				:disabled="inputEnabled"
				@blur="changePoint"
				suffix-icon="el-icon-edit"
			></el-input>
		</div>
		<!-- 名称 -->
		<div class="pointAttribute-item">
			<span class="label head">文本</span>
		</div>
		<div class="pointAttribute-item">
			<span class="label">展示文本</span>
			<el-input v-model="attributeData.Text" :disabled="inputEnabled" @blur="changePoint"></el-input>
		</div>
		<!-- 位置平移 -->
		<div class="pointAttribute-item">
			<span class="label head">位置</span>
			<div class="pointAttribute-setstep">
				<el-popover placement="left" trigger="click" popper-class="leftPopver">
					<span slot="reference">设置步长</span>
					<template #default>
						<el-input
							size="mini"
							style="width: 95px"
							@blur="confirmStep"
							v-model="step"
							type="number"
						></el-input>
					</template>
				</el-popover>
			</div>
		</div>
		<div class="pointAttribute-item" @mouseenter="showStep.x = true" @mouseleave="showStep.x = false">
			<span class="label">坐标X(m)</span>
			<el-input
				type="number"
				v-model="attributeData.Transform.translation.x"
				:disabled="inputEnabled"
				@blur="changePoint"
			></el-input>
			<div class="step" v-show="showStep.x">
				<i class="el-icon-arrow-up" @click="toggleInputValue('x', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('x', 0)"></i>
			</div>
		</div>
		<div class="pointAttribute-item" @mouseenter="showStep.y = true" @mouseleave="showStep.y = false">
			<span class="label">坐标Y(m)</span>
			<el-input
				type="number"
				v-model="attributeData.Transform.translation.y"
				:disabled="inputEnabled"
				@blur="changePoint"
			></el-input>
			<div class="step" v-show="showStep.y">
				<i class="el-icon-arrow-up" @click="toggleInputValue('y', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('y', 0)"></i>
			</div>
		</div>
		<div class="pointAttribute-item" @mouseenter="showStep.z = true" @mouseleave="showStep.z = false">
			<span class="label">坐标Z(m)</span>
			<el-input
				type="number"
				v-model="attributeData.Transform.translation.z"
				:disabled="inputEnabled"
				@blur="changePoint"
				@mouseenter="showStep.z = true"
				@mouseleave="showStep.z = false"
			></el-input>
			<div class="step" v-show="showStep.z">
				<i class="el-icon-arrow-up" @click="toggleInputValue('z', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('z', 0)"></i>
			</div>
		</div>
		<!-- 交互 -->
		<div class="pointAttribute-item">
			<span class="label head">交互</span>
		</div>
		<div class="pointAttribute-item">
			<span class="label">交互功能</span>
			<el-select
				v-model="attributeData.Functional"
				placeholder="请选择"
				@change="changePoint"
				:disabled="inputEnabled"
			>
				<el-option
					v-for="item in FuncOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				></el-option>
			</el-select>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	name: 'pointAttribute',
	props: {
		attributeInfo: {
			type: Object | '',
			default: () => {}
		}
	},
	computed: {
		...mapGetters('ue4Info', {
			activeData: 'queryActiveGroupData'
		})
	},
	watch: {
		attributeInfo(val) {
			this.attributeData = val ? val : '';
			this.setAttributeData();
		}
	},
	data() {
		return {
			inputEnabled: false /* 是否可以操作 */,
			attributeData: '' /* 属性值 */,
			showStep: {
				/* 是否展示步进器 */
				x: false,
				y: false,
				z: false
			},
			step: 1 /* 步进值 */,
			FuncOptions: [
				{ label: '刷新数据', value: 'UpdateData' },
				{ label: '打开弹框', value: 'openModal' }
			]
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.attributeData = this.attributeInfo;
			this.setAttributeData();
		},

		// 设置属性数据
		setAttributeData() {
			if (this.attributeData) {
				this.attributeData.Transform.translation.x = Number(
					this.attributeData.Transform.translation.x
				).toFixed(2);
				this.attributeData.Transform.translation.y = Number(
					this.attributeData.Transform.translation.y
				).toFixed(2);
				this.attributeData.Transform.translation.z = Number(
					this.attributeData.Transform.translation.z
				).toFixed(2);
			}
		},

		// 修改点位
		changePoint() {
			$ue4.setActorData(this.attributeData);

			this.activeData.map((item) => {
				if (item.Data.NameInLevel === this.attributeData.NameInLevel) {
					item.Data.DisplayName = this.attributeData.DisplayName;
				}
			});
		},

		// 修改input的值
		toggleInputValue(type, mode) {
			if (mode) {
				this.attributeData.Transform.translation[type] = (
					Number(this.attributeData.Transform.translation[type]) + Number(this.step)
				).toFixed(2);
			} else {
				this.attributeData.Transform.translation[type] = (
					Number(this.attributeData.Transform.translation[type]) - Number(this.step)
				).toFixed(2);
			}

			this.changePoint();
		},

		// 步长
		confirmStep() {
			if ($xy.IS(this.step.toString())) {
				this.$message.warning('步长不能为空');
				this.step = 0.1;
			}
		}
	}
};
</script>

<style lang="scss">
.pointAttribute {
	height: 100%;

	.pointAttribute-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
		height: 32px;
		position: relative;

		.label {
			display: flex;
			align-items: center;
			min-width: 85px;
			@include xy-stopselect;

			i {
				margin-left: 5px;
				font-size: 16px;
				cursor: pointer;
			}

			.el-icon-unlock {
				color: rgb(234, 234, 234);
			}
		}

		.step {
			position: absolute;
			display: flex;
			flex-direction: column;
			right: 8px;

			i {
				cursor: pointer;
				transform: scale(0.8);

				&:hover {
					color: #fff;
					font-weight: bold;
				}
			}
		}

		.head {
			color: #ccc;
		}

		.pointAttribute-setstep {
			text-decoration: underline;
			@include xy-stopselect;
			cursor: pointer;

			&:active {
				color: #ccc;
			}
		}
	}
}
</style>
